/** * Create by mzq * Description: 中间区域 * Date: 2024/9/13 15:35 * Update: 2024/9/13 15:35 */

<template>
  <div class="bg">
    <div class="title">易爱全国市场分布图/用户分布图</div>
    <div class="w-full flex justify-center items-center relative">
      <Map></Map>
      <UrbanWearGrowthRateBar class="absolute bottom-[14%] left-[4%]"></UrbanWearGrowthRateBar>
      <NumberWeeklyActivationsLine
        :data="list2"
        class="absolute bottom-[-8%] left-[4%]"
      ></NumberWeeklyActivationsLine>
      <UserCharacteristicsPic
        :data="list2"
        class="absolute bottom-[-8%] left-[21%]"
      ></UserCharacteristicsPic>

      <!-- 地图图标提示 -->

      <!-- 正常信号 -->
      <div class="flex absolute bottom-[35%] right-[10%]">
        <div>
          <img class="w-[15px] h-[15px]" src="@/image/normal.png" alt="" />
        </div>
        <div class="text-[#B3B3B3]">正常信号</div>
      </div>

      <div class="flex absolute bottom-[30%] right-[10%]">
        <div>
          <img class="w-[15px] h-[15px]" src="@/image/warning.png" alt="" />
        </div>
        <div class="text-[#B3B3B3]">预警信号</div>
      </div>

    </div>

    <TestingCenter :reqData="list"></TestingCenter>
  </div>
</template>
<script setup>
//地图
import Map from '@/views/components/Center/Map.vue'
// 各城市每月佩戴用户增长柱状图
import UrbanWearGrowthRateBar from '@/views/components/Center/UrbanWearGrowthRateBar.vue'
// 每周激活设备数量
import NumberWeeklyActivationsLine from '@/views/components/Center/NumberWeeklyActivationsLine.vue'
// 用户特性分布
import UserCharacteristicsPic from '@/views/components/Center/UserCharacteristicsPic.vue'
// 易爱脑血管监测预警监护中心
import TestingCenter from '@/views/components/Center/TestingCenter.vue'
import { ref, watch } from 'vue'

const list = ref()

const list2 = ref()

const props = defineProps({
  reqDate: {
    type: Object
  },
  UserDeviceInfoList: {
    type: Object
  }
})

// 底部监护中心数据
watch(
  () => props.reqDate,
  (val) => {
    list.value = val
  }
)

watch(
  () => props.UserDeviceInfoList,
  (val) => {
    list2.value = val
  }
)
</script>
<style scoped lang="scss">
.bg {
  overflow: hidden;
  position: relative;
  width: 5.1198rem /* 983/192 */;
  height: 5.15625rem /* 990/192 */;
  background: url('@/image/bg4.png') no-repeat;
  background-size: 100% 100%;
  margin-left: 0.0833rem /* 16/192 */;

  .title {
    position: absolute;
    top: 3%;
    font-family: 'alimamashuheiti';
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4adde4;
    font-size: 0.0729rem /* 14/192 */;
    width: 100%;
  }
}
</style>
